Lifecycle events

What are lifecycle hooks?

Muze exposes a set of lifecycle events. All these events take in a callback function which is then invoked based on the lifecycle event. This allows the user to add custom effects at a certain stage in the chart creation.

Canvas layout

beforeLayout: Fired before the layout is calculated for a component.

canvas.once("beforeLayout", () => {
  // Perform custom operation
  console.log("Canvas before layout");
});

afterLayout: Fired after the layout is calculated for a component.

canvas.once("afterLayout", () => {
  // Perform custom operation
  console.log("Canvas after layout");
});

Drawing complete

beforeRendered: Fired before a component is rendered.

canvas.once("beforeRendered", () => {
  // Perform custom operation
  console.log("Canvas before render");
});

afterRendered: Fired after chart has been drawn (before animation and side-effects).

canvas.once("afterRendered", () => {
  // Perform custom operation
  console.log("Canvas after render");
});

Animation end

animationEnd: Fired after chart is rendered and animation done.

canvas.once("animationEnd", () => {
  // Perform custom operation
  console.log("Animation end");
});

Canvas dispose

beforeDisposed: Fired before a component is destroyed.

canvas.once("beforeDisposed", () => {
  // Perform custom operation
  console.log("Canvas before dispose");
});

afterDisposed: Fired after a component is destroyed.

canvas.once("afterDisposed", () => {
  // Perform custom operation
  console.log("Canvas after dispose");
});

Example

Below, we add a red border on the chart on animationEnd (notice it appears just after animation completes).

const { muze, getDataFromSearchQuery } = viz;

const data = getDataFromSearchQuery();

const RowField = "Acceleration";
const ColumnField = "Origin";

let canvas;

function renderChart() {
  // Clear chart and lifecycle containers
  document.getElementById("chart").innerHTML = "";
  document.getElementById("lifecycle").innerHTML = "";

  canvas = muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .config({
      border: {
        showValueBorders: {
          left: true,
          bottom: true,
        },
      },
    })
    .data(data)
    .width(700)
    .height(700)
    .mount("#chart");

  canvas.once("beforeLayout", () => {
    setTimeout(() => {
      canvas.config({
        border: {
          style: "solid",
          color: "red",
          width: 2,
        },
      });
    }, 1000);
  });

  canvas.once("afterLayout", () => {
    setTimeout(() => {
      canvas.config({
        border: {
          style: "solid",
          color: "green",
          width: 2,
        },
      });
    }, 2000);
  });

  canvas.once("beforeRendered", () => {
    setTimeout(() => {
      canvas.config({
        border: {
          style: "solid",
          color: "purple",
          width: 2,
        },
      });
    }, 3000);
  });

  canvas.once("afterRendered", () => {
    setTimeout(() => {
      canvas.config({
        border: {
          style: "solid",
          color: "orange",
          width: 2,
        },
      });
    }, 4000);
  });

  canvas.once("animationEnd", () => {
    setTimeout(() => {
      canvas.config({
        border: {
          style: "solid",
          color: "blue",
          width: 2,
        },
      });

      setTimeout(() => {
        canvas.dispose();
      }, 1000);
    }, 5000);
  });

  canvas.once("beforeDisposed", () => {
    setTimeout(() => {
      canvas.config({
        border: {
          style: "solid",
          color: "black",
          width: 2,
        },
      });
    }, 6000);
  });

  canvas.once("afterDisposed", () => {
    const lifecycle = document.getElementById("lifecycle");
    const div = document.createElement("span");
    div.innerHTML = "Canvas disposed!";
    div.style.justifyContent = "center";
    div.style.display = "flex";
    lifecycle.appendChild(div);
  });
}

renderChart();

document.getElementById('updateButton').onclick = () => {
  renderChart();
};